<template>
    <div class="login-container">
        <!-- 登录 -->
        <div class="login-wrap">
            <div class="login">
                <div class="loginform">
                    <ul class="tab clearFix">
                        <li>
                            <a href="javascript:;" style="border-right: 0;">扫描登录</a>
                        </li>
                        <li>
                            <a href="javascript:;" class="current">账户登录</a>
                        </li>
                    </ul>
                    
                    <div class="content">
                        <!--
                            路由展示问题,两个解决办法
                            1. form 表单的actions属性 写成 javascript:;
                            2. 提交按钮的click事件,阻止默认行文 @click.prevent
                        -->
                        <form action="##">
                            <div class="input-text clearFix">
                                <span></span>
                                <input type="text" placeholder="邮箱/用户名/手机号" v-model="formData.phone">
                            </div>
                            <div class="input-text clearFix">
                                <span class="pwd"></span>
                                <input type="text" placeholder="请输入密码" v-model="formData.password">
                            </div>
                            <div class="setting clearFix">
                                <label class="checkbox inline">
                                    <input name="m1" type="checkbox" value="2" checked="">
                                    自动登录
                                </label>
                                <span class="forget">忘记密码？</span>
                            </div>
                            <button class="btn" @click.prevent="login">登&nbsp;&nbsp;录</button>
                        </form>
                        
                        <div class="call clearFix">
                            <div>
                                <ul>
                                    <li><img src="./images/qq.png" alt=""></li>
                                    <li><img src="./images/sina.png" alt=""></li>
                                    <li><img src="./images/ali.png" alt=""></li>
                                    <li><img src="./images/weixin.png" alt=""></li>
                                </ul>
                                <el-button type="success" style="float: right" @click="registerUser2">去首页</el-button>
                                <el-button type="primary" style="" @click="registerUser">立即注册</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--      注册信息的对话框      -->
            <el-dialog v-model="dialogFormVisible" title="注册中舞网账号" @close="closeRegister">
                <el-form :model="registerForm">
                    <el-form-item label="手机号" label-width="100px">
                        <el-input v-model="registerForm.phone" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="验证码" label-width="100px">
                        <el-input v-model="registerForm.code" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                        <el-input v-model="registerForm.password" type="password" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="100px">
                        <el-input v-model="registerForm.rePassword" type="password" autocomplete="off"/>
                    </el-form-item>
                </el-form>
                <template #footer>
      <span class="dialog-footer">
          <el-button @click="codeChange" type="success"> 发送验证码</el-button>
        <el-button @click="dialogFormVisible = false">取消注册</el-button>
        <el-button type="primary" @click="confirmRegister"
        >确定注册</el-button>
      </span>
                </template>
            </el-dialog>
        </div>
        <!-- 底部 -->
        <div class="copyright">
            <ul>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>联系客服</li>
                <li>商家入驻</li>
                <li>营销中心</li>
                <li>手机尚品汇</li>
                <li>销售联盟</li>
                <li>尚品汇社区</li>
            </ul>
            <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
            <div class="beian">京ICP备19006430号
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,watch} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import {useRouter,useRoute} from "vue-router";
import {useUserInfoStore} from "../../store/modules/userInfo.js";
import pinia from "../../store/index.js";
    const storeUserInfo = useUserInfoStore(pinia)
//实例化路由
const router = useRouter();
const route = useRoute()
//收集登录数据表单
const formData = ref({
    phone: "18538018713",
    password: "123456",
})
//登录的回调函数
const login = async () => {
    // 组装数据,校验数据
    let {phone, password} = formData.value;
    if (!(phone && password)) {
        ElMessage.warning('请输入完成的信息')
        return
    }
    // 发请求
    try {
        await storeUserInfo.setLogin({
            phone,
            password
        });
        await router.push({ path: redirect.value || '/' })
        ElMessage.success('登录成功')
    } catch (error) {
        alert(error);
        console.error(error);
    }
}
/*------------------------注册信息----------------------------*/
//控制对话框的显示与隐藏
const dialogFormVisible = ref(false);
//注册信息的数据
const registerForm = ref({
    phone: "",
    code: "",
    password: "",
    rePassword: ""
})
const redirect = ref('')
watch(route, () => {
    redirect.value = route.query && route.query.redirect
}, {immediate: true})
//点击立即注册的回调函数
const registerUser = () => {
    dialogFormVisible.value = true;
}
const registerUser2 = () => {
    router.push("/");
}
//点击获取验证码的回调函数
const codeChange = async () => {
    if (!registerForm.value.phone.trim()) {
        ElMessage.warning('请输入完整的手机号')
        return
    }
    if (registerForm.value.phone.length !== 11) {
        ElMessage.warning('手机号为11位数')
        return
    }
    try {
        const result = await axios.get(`http://gmall-h5-api.atguigu.cn/api/user/passport/sendCode/${registerForm.value.phone}`);
        console.log(result.data.data)
        registerForm.value.code = result.data.data;
        ElMessage.success('获取验证码成功')
    } catch (error) {
        alert(error);
    }
}
//点击确定注册的回调函数
const confirmRegister = async () => {
    console.log(registerForm.value)
    if (!registerForm.value.phone.trim() && !registerForm.value.code.trim()) {
        ElMessage.warning('手机号和验证码不能为空')
        return;
    }
    if (registerForm.value.password.length < 6 || registerForm.value.password !== registerForm.value.rePassword) {
        ElMessage.warning('两次密码不相同或者长度小于6')
        return;
    }
    
    //调用actions 发送请求
    try {
        const result = await axios.post(`http://gmall-h5-api.atguigu.cn/api/user/passport/register`, {
            phone: registerForm.value.phone,
            code: registerForm.value.code,
            password: registerForm.value.password
        })
        if (result.data.message == "成功") {
            ElMessage.success("注册成功")
            dialogFormVisible.value = false
        }else{
            ElMessage.warning(result.data.message)
        }
        
    } catch (error) {
        alert("注册失败")
        console.error(error)
    }
}
//对话框消失的回调函数  清空表单
const closeRegister = () => {
    registerForm.value = {
        ...{
            phone: "",
            code: "",
            password: "",
            rePassword: ""
        }
    }
}
</script>
<style scoped lang="less">
.login-container {
    .login-wrap {
        height: 597px;
        background-color: #e93854;
        
        .login {
            width: 1200px;
            height: 527px;
            margin: 0 auto;
            background: url(./images/loginbg.png) no-repeat;
        }
        
        .loginform {
            width: 420px;
            height: 406px;
            box-sizing: border-box;
            background: #fff;
            float: right;
            top: 45px;
            position: relative;
            padding: 20px;
            
            .tab {
                
                li {
                    width: 50%;
                    float: left;
                    text-align: center;
                    
                    a {
                        width: 100%;
                        display: block;
                        height: 50px;
                        line-height: 50px;
                        font-size: 20px;
                        font-weight: 700;
                        color: #333;
                        border: 1px solid #ddd;
                        box-sizing: border-box;
                        text-decoration: none;
                        
                    }
                    
                    .current {
                        border-bottom: none;
                        border-top-color: #28a3ef;
                        color: #e1251b;
                    }
                }
            }
            
            .content {
                width: 380px;
                height: 316px;
                box-sizing: border-box;
                border: 1px solid #ddd;
                border-top: none;
                padding: 18px;
                
                form {
                    margin: 15px 0 18px 0;
                    font-size: 12px;
                    line-height: 18px;
                    
                    .input-text {
                        margin-bottom: 16px;
                        
                        span {
                            float: left;
                            width: 37px;
                            height: 32px;
                            border: 1px solid #ccc;
                            background: url(../../assets/images/icons.png) no-repeat -10px -201px;
                            box-sizing: border-box;
                            border-radius: 2px 0 0 2px;
                        }
                        
                        .pwd {
                            background-position: -72px -201px;
                        }
                        
                        input {
                            width: 302px;
                            height: 32px;
                            box-sizing: border-box;
                            border: 1px solid #ccc;
                            border-left: none;
                            float: left;
                            padding-top: 6px;
                            padding-bottom: 6px;
                            font-size: 14px;
                            line-height: 22px;
                            padding-right: 8px;
                            padding-left: 8px;
                            
                            border-radius: 0 2px 2px 0;
                            outline: none;
                        }
                    }
                    
                    .setting {
                        label {
                            float: left;
                        }
                        
                        .forget {
                            float: right;
                        }
                    }
                    
                    .btn {
                        background-color: #e1251b;
                        padding: 6px;
                        border-radius: 0;
                        font-size: 16px;
                        font-family: 微软雅黑;
                        word-spacing: 4px;
                        border: 1px solid #e1251b;
                        color: #fff;
                        width: 100%;
                        height: 36px;
                        margin-top: 25px;
                        outline: none;
                    }
                }
                
                .call {
                    margin-top: 30px;
                    
                    ul {
                        float: left;
                        
                        li {
                            float: left;
                            margin-right: 5px;
                        }
                    }
                    
                    .register {
                        float: right;
                        font-size: 15px;
                        line-height: 38px;
                    }
                    
                    .register:hover {
                        color: #4cb9fc;
                        text-decoration: underline;
                    }
                }
                
            }
        }
    }
    
    .copyright {
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        line-height: 24px;
        
        ul {
            li {
                display: inline-block;
                border-right: 1px solid #e4e4e4;
                padding: 0 20px;
                margin: 15px 0;
            }
        }
    }
    
}

</style>
